<template>
  <div
      id="userLayout"
      class="w-full h-full relative"
  >
    <div
        class="rounded-lg flex items-center justify-evenly w-full h-full md:w-screen md:h-screen md:bg-[#194bfb]"
    >
      <div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
        <div class="oblique h-[130%] w-3/5 bg-white dark:bg-slate-900 transform -rotate-12 absolute -ml-52" />
        <!-- 分割斜块 -->
        <div class="z-[999] pt-12 pb-10 md:w-96 w-full  rounded-lg flex flex-col justify-between box-border">
          <div>
            <div class="flex items-center justify-center">
              <img
                  class="w-24"
                  :src="$GIN_VUE_ADMIN.appLogo"
                  alt
              >
            </div>
            <div class="mb-9">
              <p class="text-center text-4xl font-bold">{{ $GIN_VUE_ADMIN.appName }}</p>
              <p class="text-center text-sm font-normal text-gray-500 mt-2.5">A management platform using Golang and Vue
              </p>
            </div>
            <el-form
                ref="loginForm"
                :model="loginFormData"
                :rules="rules"
                :validate-on-rule-change="false"
                @keyup.enter="submitForm"
            >
              <el-form-item
                  prop="name"
                  class="mb-6"
              >
                <el-input
                    v-model="loginFormData.name"
                    size="large"
                    placeholder="请输入姓名"
                    suffix-icon="user"
                />
              </el-form-item>
              <el-form-item
                  prop="phone"
                  class="mb-6"
              >
                <el-input
                    v-model="loginFormData.phone"
                    size="large"
                    placeholder="请输入手机号"
                    suffix-icon="user"
                />
              </el-form-item>
              <el-form-item
                  prop="nickName"
                  class="mb-6"
              >
                <el-input
                    v-model="loginFormData.nickName"
                    size="large"
                    placeholder="请输入昵称"
                    suffix-icon="user"
                />
              </el-form-item>
              <el-form-item
                  prop="passwd"
                  class="mb-6"
              >
                <el-input
                    v-model="loginFormData.passwd"
                    show-password
                    size="large"
                    type="password"
                    placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item
                  prop="idCard"
                  class="mb-6"
              >
                <el-input
                    v-model="loginFormData.idCard"
                    size="large"
                    placeholder="请输入身份证号"
                />
              </el-form-item>
              <el-form-item class="mb-6">
                <el-button
                    class="shadow shadow-active h-11 w-full"
                    type="primary"
                    size="large"
                    @click="submitForm"
                >注册</el-button>
              </el-form-item>
              <el-form-item class="mb-6">
                <el-button
                    class="shadow shadow-active h-11 w-full"
                    type="primary"
                    size="large"
                    @click="goToLogin"
                >前往登陆</el-button>
              </el-form-item>
            </el-form>

          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'

defineOptions({
  name: 'Register',
})

const router = useRouter()

const loginForm = ref(null)
const loginFormData = reactive({
  name: '',
  phone: '',
  nickName: '',
  passwd: '',
  idCard: '',
})

const submitForm = async () => {
  try {
    const response = await axios.post('api/user/regisApply', loginFormData)
    if (response.data.code === 0) {
      ElMessage.success('注册成功')
      router.push({ name: 'Login' })
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('注册失败，请重试')
    console.error('Registration error:', error)
  }
}

const goToLogin = () => {
  router.push({ name: 'Login' })
}
</script>

<style lang="scss" scoped>

</style>
